<template>
    <view v-if="mode==='select'" @click="handleShow"
          class="flex flex-sub align-center bg-white padding solid">
        <view v-if="curHospital&&hospitalItem" class="flex flex-sub align-center justify-center">
            <view class="cu-avatar round"
                  :style="'background-image:url('+hospitalItem.logo+');'">
            </view>
            <view class="text-bold text-black">{{ hospitalItem.hospital }}</view>
            <view class="margin-left cuIcon-close" @click.stop="handleReset"></view>
        </view>
        <view v-else>
            <text class="text-gray text-xl">医院筛选</text>
        </view>
    </view>
    <view v-else-if="mode==='input'" @click="handleShow">
        <uni-easyinput v-model="curHospital" placeholder="请选择医院" :disable="disable"></uni-easyinput>
    </view>
    <uni-popup ref="popup" background-color="#fff" @change="change">
        <view class="cu-bar bg-white" style="margin-top: 70px">
            <view class="action">医院选择</view>
            <view class="action">
                <text class="padding-lr text-orange" @click="handleReset">重置</text>
                <text class="padding-lr  text-blue" @click="handleHide">取消</text>
            </view>
        </view>
        <view style="height: 300px" class="radius">
            <z-paging v-if="show" ref="pagingRef" :fixed="false" @query="queryList" v-model="list">
                <template #top>
                    <view class="padding">
                        <uni-easyinput @input="entering" focus v-model="searchKey"
                                       placeholder="搜索医院名称"></uni-easyinput>
                    </view>
                </template>
                <view class="item" v-for="(item,index) in list" :key="index" @click="handleItem(item)">
                    <HospitalItem :hospital-item="item"></HospitalItem>
                </view>
            </z-paging>
        </view>
    </uni-popup>


</template>

<script setup lang="ts">
import {computed, defineEmits, defineProps, ref} from "vue";
import api from "@/api";
import {debounce} from "@/utils/common/myUtils";
import HospitalItem from "@/components/common/item/HospitalItem.vue";


const props = defineProps({
    hospital: {
        type: String,
        default: '',
    },
    mode: {
        type: String,
        default: 'input'
    },
    disable: {
        type: Boolean,
        default: false
    }
})
const popup = ref()

const list = ref([])
const pagingRef = ref()

const hospitalItem = ref()
const show = ref(false)
const searchKey = ref('')
const andParams = ref({
    hospital: '',
})
const orParams = ref({})
const orderParams = ref({
    createTime: '2',
})

const change = (e: any) => {
    show.value = e.show
}
const entering = debounce(() => {
    pagingRef.value.reload()
}, 500)

const queryList = (pageNo: any, pageSize: any) => {
    andParams.value.hospital = `%${searchKey.value}%`
    api.hospital.list({
        pageNo: pageNo,
        pageSize: pageSize,
        andParams: JSON.stringify(andParams.value),
        orParams: JSON.stringify(orParams.value),
        orderParams: JSON.stringify(orderParams.value),
    }).then(res => {
        if (res && res.data.code === 0) {
            let tmp = res.data.data.records
            pagingRef.value.complete(tmp);
        }
    })
}


const handleShow = () => {
    popup.value.open('top')
}
const handleHide = () => {
    popup.value.close()
}
const handleReset = () => {
    popup.value.close()
    curHospital.value = ''
    emits('onChange', curHospital.value)
}
const handleItem = (item: any) => {
    hospitalItem.value = item
    curHospital.value = item.hospital
    emits('onChange', curHospital.value)
    orParams.value.hospital = ''
    popup.value.close()

}
const emits = defineEmits(['update:hospital', 'onChange'])

const curHospital = computed({
    get() {
        return props.hospital
    },
    set(val) {
        emits('update:hospital', val)
    }
})


</script>

<style scoped>

</style>